<template>
  <div id="login">
    <header></header>
    <form :model="formTop">
      <fieldset class="store-info" style="margin-top: -50%;">
        <h1 class="pt30" style="font-size: 24px;font-weight: normal;">登录</h1>
        <p class="f12 mt5" style="color: #A9A9A9">欢迎您来到大好味来！</p>
        <view class="f15 mt10 mb10">账户</view>
        <view class='info-write flex align-center '>
          <i class='iconfont'>&#xe662;</i>
          <input placeholder="请输入您的手机号" v-model="formTop.phone" maxlength="11"/>
        </view>
        <view class="f15 mt10 mb10">密码</view>
        <view class='info-write flex align-center '>
          <i class='iconfont'>&#xe660;</i>
          <input placeholder="请输入密码" v-model="formTop.password" maxlength="11" type="password"/>
        </view>
        <section class="mt10">
          <a class="flex1" href="../register/main">注册</a>
          <a class="tr" href="../find-password/main">找回密码</a>
        </section>
        <i-button class="mt10" type="success" i-class="fp-button" @click="login">{{loginText}}</i-button>
        <aside class="mt5">
          <i v-if="!matters" @click="matters = true" class="iconfont">&#xe7e2;</i>
          <i v-else @click="matters = false" class="iconfont" style="color: #22B14A">&#xe693;</i>
          <p>我已阅读并同意<a style="display: inline;">《大好味来服务协议》</a></p>
        </aside>
        <p class="f14 tc other-login pl13-pt13 mt50" style="color: #000">第三方登录</p>
        <i class="iconfont" style="font-size: 40px;  color: #22B14A;">&#xe680;</i>
      </fieldset>
      <i-modal :visible="showVerification">
        <imageAuthentication :changeSteps="changeSteps" @getChangeSteps="getChangeSteps" :matters="matters" @matters="mattersStatus"></imageAuthentication>
        <i class="iconfont closes" @tap="matters = false">&#xe6e9;</i>
      </i-modal>
    </form>
  </div>
</template>

<script type="ECMAScript 6">
  import imageAuthentication from '@/components/image-authentication';
  export default {
    name: 'register',
    components: {
      imageAuthentication
    },
    data () {
      return {
        showVerification: false,
        matters: false,
        formTop: {phone: '', password: ''},
        loginUser: {user_name: '18217210298', user_pass: '12345678'},
        count: 0,
        loginText: '立即登录'
      };
    },
    methods: {
      // 登录用户验证
      login () {
        this.loginText = '登录中···';
        console.log(this.count);
        this.count >= 3 ? this.showVerification = true : '';
        setTimeout(() => {
          var regBox = {
            regMobile: /^0?1[3|4|5|8][0-9]\d{8}$/ // 手机号码正则表达式
          };
          var status = this.formTop.phone === '' ? wx.showToast({
            title: '手机号为空',
            duration: 2000,
            icon: 'none'
          }) : !regBox.regMobile.test(this.formTop.phone) ? wx.showToast({
            title: '您输入的手机号格式不正确！',
            duration: 2000,
            icon: 'none'
          }) : this.formTop.password === '' ? wx.showToast({
            title: '密码为空！',
            duration: 2000,
            icon: 'none'
          }) : this.matters === false && wx.showToast({
            title: '您未同意服务事项！',
            duration: 2000,
            icon: 'none'
          });
         if (!status && status !== undefined) {
           if (this.formTop.phone !== this.loginUser.user_name) {
             wx.showToast({
               title: '手机号错误！',
               duration: 2000,
               icon: 'none'
             });
             this.count++;
           } else if (this.formTop.password !== this.loginUser.user_pass) {
             wx.showToast({
               title: '密码错误！',
               duration: 2000,
               icon: 'none'
             });
             this.count++;
           } else {
             let datas = {'user_name': this.formTop.phone, 'user_pass': this.formTop.password};
           }
         }
          this.loginText = '立即登录';
        }, 2000);
      },
      mattersStatus (data) {
        this.matters = data;
      }
    }
  };
</script>

<style lang="stylus" scoped>
  a:hover
    background transparent;
  .store-info
     margin 0 38px;background #fff; padding 0 25px;
  .info-write
    i
      color #22B14A; font-size 20px;
  #login
     width 100%; min-height 100vh; background #fff;
    header
      width 100%; height 263px;background url(""); background-size: cover; background-position center;
    section
      display flex;align-items center;
      a
        font-size 12px; color #A5A5A5;
    aside
      display flex; align-items center;
      i
        font-size 20px;
      p
        color #a5a5a5; font-size 12px;
    input
      font-size 14px; padding-left 15px;
    .other-login
        position relative; width 84%; margin 50px auto 0;
    .other-login:before, .other-login:after
      position absolute; content ""; top 10px; height 1px; width 35% ;background #dedede;
    .other-login:before
      left 0;
    .other-login:after
      right 0;
    i
      display block; text-align center;
  .closes
    font-size: 20px;  color: #fff;  text-align: center;position:fixed; width:100%;z-index:2000; margin:0 auto; left:0; bottom:10%;
  .closes
    font-size: 20px;  color: #fff;  text-align: center; position:fixed; width:100%;z-index:2000; margin:0 auto; left:0; bottom:10%;
</style>

<style lang="stylus">
  .fp-button
    margin 15px  0  0 0!important;
</style>
